<template>
  <div class="refine_lawforcelist">
    <h2 class="titleblue">执法力量</h2>
    <div class="contant">
      <div class="plan-operate">
        <div @click="add" class="fl create" v-if="">新增执法力量</div>
        <div class="fr">
          所属机构
          <el-select clearable v-model="department" @change="ogChange($event, 'department')">
            <el-option v-for="item in ogOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-select clearable v-model="organization" @change="ogChange($event, 'organization')">
            <el-option v-for="item in dpOptions" :key="item.id" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </div>
      </div>
      <el-table :data="tableData1" border style="width: 100%">
        <el-table-column align="center" label="序号" width="60" prop="no">
          <template slot-scope="scope">
            {{(scope.$index+1)<10? '0'+(scope.$index+1):scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="执法单元类型" prop="category"></el-table-column>
        <el-table-column align="center" label="执法单元数量" prop="amount"></el-table-column>
        <el-table-column align="center" label="所属机构">
          <template slot-scope="scope">
            {{scope.row.organiza.name}} {{scope.row.parentOrgName}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="manipulate({data: scope.row, action: 'edit'})">编辑</el-button>
            <el-button size="mini" type="text" @click="manipulate({data: scope.row, action: 'view'})">查看</el-button>
            <el-button size="mini" type="text" @click="manipulate({data: scope.row, action: 'del'})">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--<data-table :head="thead1" :data="tableData1" :page='currentPage' @callback="manipulate"-->
      <!--:actions="['edit','view','del']"-->
      <!--class="intendance-table"></data-table>-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
                     :total="totalPage" background>
      </el-pagination>
    </div>

    <el-dialog title="" :visible.sync="adddialog" width="80%" append-to-body @close="close">
        <span>
            <router-view :typeOptions="typeOptions" :ogOptions="ogOptions" :detail="detail" @close="close"
                         :id='ddid'></router-view>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import Location from '@/components/common/Location.vue'
  import dictService from '@/services/DictionaryService.js'
  import * as orgService from '@/services/OrganizationService'
  import lawEnforceService from '@/services/LawEnforceService.js'

  export default {
    name: 'LawEquip',
    components: {
      'data-table': DataTable,
      Location
    },
    data: function () {
      return {
        department: '',
        organization: '',
        adddialog: false,
        totalPage: 0,
        currentPage: 1,
        ddid: '',
        id: '',
        ogOptions: [],
        dpOptions: [],
        orgcont: '',
        detail: '',
        thead1: [
          {
            name: '执法单元类型',
            prop: 'category'
          },
          {
            name: '执法单元数量',
            prop: 'amount'
          },
          {
            name: '所属机构',
            prop: 'name'
          },
        ],
        tableData1: [],
        typeOptions: [],
        sysShow: false,
      }
    },
    created () {
      this.getSelect()
      this.getData(0)
    },
    methods: {
      handleQuery () {
        var query = ''
        //parentOrgName
        if (this.department) {
          query += 'organiza.id==' + this.department
        }
        if (this.organization) {
          if (query) {
            query += ';'
          }
          query += 'parentOrgName==' + this.organization
        }
        return query
      },
      getSelect () {
        orgService.findAll().then(async res => {
          await res.data.sort((a, b) => {
            if(a.businessOrg < b.businessOrg){
              return -1
            }
            if(a.businessOrg > b.businessOrg){
              return 1
            }
            return 0
          })
          this.ogOptions = res.data
        })
        dictService.find('ZFLLLX').then(res => {
          this.typeOptions = res
        })
      },
      getData (num, query) {
        lawEnforceService.search(num, query).then(res => {
          this.totalPage = res.dataCount
          this.tableData1 = res.data
        })
      },
      add () {
        this.adddialog = true
        this.$router.push('/law-force/create-force')
        this.ddid = ''
        this.detail = 'create'
      },
      manipulate (param) {
        if (param.action == 'edit') {
          this.adddialog = true
          this.$router.push({name: 'CreateForce', params: param})
          // this.ddid = this.tableData1[doing[1]].d_id
          this.detail = 'edit'
        }
        if (param.action == 'view') {
          this.adddialog = true
          this.$router.push({name: 'CreateForce', params: param})
          // this.ddid = this.tableData1[doing[1]].d_id
          this.detail = 'look'
        }
        if (param.action == 'del') {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              lawEnforceService.delete(param.data.id).then(res => {
                this.getData(0)
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        }
      },
      handleSizeChange (val) {
        this.getData(val - 1)
      },
      handleCurrentChange (val) {
        this.getData(val - 1)
      },
      close () {
        this.adddialog = false
        this.$router.push('/law-force')
        this.getData(0)
      },
      async ogChange (event, val) {
        this.currentPage = 1
        if (val == 'department') {
          this.organization = ''
          this.dpOptions = []
          //
          for (var i of this.ogOptions) {
            if (i.id == event) {
              this.dpOptions = i.sub
            }
          }
        }
        let query = await this.handleQuery()
        this.getData(0, query)
      },
    }
  }
</script>

<style scoped lang="scss">
  .refine_lawforcelist {
    width: 100%;
    display: inline-block;

    .plan-operate {
      width: 100%;
      display: inline-block;
    }

    .planselect {
      float: right;
      margin-right: 10px;
    }

    .planselect input {
      width: 122px;
      border-radius: 4px;
      border: solid 1px #dddddd;
    }

    .el-table {
      margin-top: 20px;
    }

    .el-table tr:nth-child(2n) {
      background: #FAFAFA
    }
  }
</style>
